<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>多着色器绘图</title>
  <style>
    body {
      margin: 0;
      overflow: hidden
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <!-- 着纯色 -->
  <script id="solidVertexShader" type="x-shader/x-vertex">
      attribute vec4 a_Position;
      void main(){
        gl_Position = a_Position;
      }
  </script>
  <script id="solidFragmentShader" type="x-shader/x-fragment">
      precision mediump float;
      void main(){
        gl_FragColor=vec4(0.9,0.7,0.4,1);
      }
  </script>

  <!-- 着纹理 -->
  <script id="textureVertexShader" type="x-shader/x-vertex">
      attribute vec4 a_Position;
      attribute vec2 a_Pin;
      varying vec2 v_Pin;
      void main(){
        gl_Position = a_Position;
        v_Pin=a_Pin;
      }
  </script>
  <script id="textureFragmentShader" type="x-shader/x-fragment">
      precision mediump float;
      uniform sampler2D u_Sampler;
      varying vec2 v_Pin;
      void main(){
        gl_FragColor=texture2D(u_Sampler,v_Pin);
      }
  </script>
  <script type="module">
    import { createProgram } from '../jsm/Utils.js';
    import { Matrix4, PerspectiveCamera, Vector3, Quaternion } from 'https://unpkg.com/three/build/three.module.js';
    import OrbitControls from './jsm/OrbitControls.js'

    const canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const gl = canvas.getContext('webgl');
    gl.clearColor(0, 0, 0, 1);

    /* ----纯色三角形---- */
    function drawSolid() {
      // 1.建立程序对象，并应用
      const solidVsSource = document.getElementById('solidVertexShader').innerText
      const solidFsSource = document.getElementById('solidFragmentShader').innerText
      const solidProgram = createProgram(gl, solidVsSource, solidFsSource)
      gl.useProgram(solidProgram)

      // 2.用当前的程序对象绘制图形
      const solidVertices = new Float32Array([
        -0.5, 0.5,
        -0.5, -0.5,
        0.5, -0.5,
      ])
      const solidVertexBuffer = gl.createBuffer()
      gl.bindBuffer(gl.ARRAY_BUFFER, solidVertexBuffer)
      gl.bufferData(gl.ARRAY_BUFFER, solidVertices, gl.STATIC_DRAW)
      const solidPosition = gl.getAttribLocation(solidProgram, 'a_Position')
      gl.vertexAttribPointer(solidPosition, 2, gl.FLOAT, false, 0, 0)
      gl.enableVertexAttribArray(solidPosition)

      gl.clear(gl.COLOR_BUFFER_BIT)
      gl.drawArrays(gl.TRIANGLES, 0, 3)
    }

    /* ----纹理三角形---- */
    function drawTexture(image) {
      /* 1.建立程序对象，并应用 */
      const textureVsSource = document.getElementById('textureVertexShader').innerText
      const textureFsSource = document.getElementById('textureFragmentShader').innerText
      const textureProgram = createProgram(gl, textureVsSource, textureFsSource)
      gl.useProgram(textureProgram)

      /* 2.用当前的程序对象绘制图形 */
      // 顶点
      const textureVertices = new Float32Array([
        0.5, 0.5,
        -0.5, 0.5,
        0.5, -0.5,
      ])
      const textureVertexBuffer = gl.createBuffer()
      gl.bindBuffer(gl.ARRAY_BUFFER, textureVertexBuffer)
      gl.bufferData(gl.ARRAY_BUFFER, textureVertices, gl.STATIC_DRAW)
      const texturePosition = gl.getAttribLocation(textureProgram, 'a_Position')
      gl.vertexAttribPointer(texturePosition, 2, gl.FLOAT, false, 0, 0)
      gl.enableVertexAttribArray(texturePosition)
      // 图钉
      const pins = new Float32Array([
        1, 1,
        0, 1,
        1, 0,
      ])
      const pinBuffer = gl.createBuffer()
      gl.bindBuffer(gl.ARRAY_BUFFER, pinBuffer)
      gl.bufferData(gl.ARRAY_BUFFER, pins, gl.STATIC_DRAW)
      const pin = gl.getAttribLocation(textureProgram, 'a_Pin')
      gl.vertexAttribPointer(pin, 2, gl.FLOAT, false, 0, 0)
      gl.enableVertexAttribArray(pin)
      // 纹理
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)
      gl.activeTexture(gl.TEXTURE0)
      const texture = gl.createTexture()
      gl.bindTexture(gl.TEXTURE_2D, texture)
      gl.texImage2D(
        gl.TEXTURE_2D,
        0,
        gl.RGB,
        gl.RGB,
        gl.UNSIGNED_BYTE,
        image
      )
      gl.texParameteri(
        gl.TEXTURE_2D,
        gl.TEXTURE_MIN_FILTER,
        gl.LINEAR
      )
      const u_Sampler = gl.getUniformLocation(textureProgram, 'u_Sampler')
      gl.uniform1i(u_Sampler, 0)

      gl.drawArrays(gl.TRIANGLES, 0, 3)
    }

    const image = new Image()
    image.src = './images/erha.jpg'
    image.onload = function () {
      drawSolid()
      drawTexture(image)
    }
  </script>
</body>

</html>